import React, { useCallback, useEffect, useState } from "react";
import { Route, Redirect, Switch } from "react-router-dom";

import 'antd/dist/antd.css';
import "@/assets/css/manage.scss"
import { withStorage } from "@/plugins/hoc";
import Home from './manage/Home'
import Dangyuan from './manage/dangyuan/Index'
import Branch from './manage/branch/Index'
import User from './manage/user/Index'
import Xitong from './manage/xitong/List'
import Monitor from './manage/monitor/List'
import Editpass from './manage/Editpass'
import Editimg from './manage/Editimg'

import {
  Layout,
  Menu,
  Breadcrumb,
  Row,
  Col,
  Avatar,
  Dropdown,
  Image,
  Select,
  Button,
} from 'antd';
import {
  TeamOutlined,
  WindowsOutlined,
  ControlOutlined,
  SecurityScanOutlined,
  TwitterOutlined,
  UserOutlined
} from '@ant-design/icons';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;


function Manage(props) {
  // console.log("props", props);
  const { username, head } = props.userInfo;
  const baseUrl = props.match.path;
  // console.log("baseUrl", baseUrl);
  const [collapsed, setCollapsed] = useState(false);
  const [theme, setTheme] = useState(localStorage.getItem("theme") ?? "dark");
  const [breadcrumb, setbreadcrumb] = useState([]);
  const [breadcrumbRoutes, setbreadcrumbRoutes] = useState([]);
  const [pathName] = useState({
    '/manage': '首页',
    '/dangyuan': '党员信息管理',
    '/user': '用户管理',
    '/branch': '支部管理',
    '/xitong': '系统管理',
    '/list': '列表',
    '/add': '添加',
    '/edit': '编辑',
    '/editpass': '修改密码',
    '/editimg': '修改头像',
    '/monitor': '监控',
  })
  // const editPsw=useCallback(async()=>{
  //   const {data}=await $axios.put("/api/users/editpwd") 
  // })
  //退出
  const logout = useCallback(() => {
    localStorage.removeItem("userInfo");
    props.history.push("/login")
  })
  //修改密码
  const editPass = useCallback(async () => {
    const { history, match } = props;
    history.push(match.path.replace('/list', '') + '/editpass/')
  })
  //修改头像
  const editImg = useCallback(async () => {
    const { history, match } = props;
    history.push(match.path.replace('/list', '') + '/editimg/')
  })
  const [contentmenu] = useState(
    <Menu>
      <Menu.Item key="0" onClick={() => {
        editImg()
      }}>修改头像
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item key="1" onClick={() => {
        editPass()
      }}>
        修改密码
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item key="3" onClick={logout}>退出登录</Menu.Item>
    </Menu>
  )

  const [menu] = useState([
    {
      path: '/manage',
      text: '首页',
      icon: <WindowsOutlined />
    },
    {
      path: '/user',
      text: '用户管理',
      icon: <TeamOutlined />,
      children: [
        {
          path: '/list',
          text: '用户列表'
        },
      ]
    },
    {
      path: '/dangyuan',
      text: '党员信息管理',
      icon: <ControlOutlined />,
      children: [
        {
          path: '/list',
          text: '党员列表'
        }
      ]
    },
    {
      path: '/branch',
      text: '支部管理',
      icon: <TeamOutlined />,
      children: [
        {
          path: '/list',
          text: '支部列表'
        },
      ]
    },
    {
      path: '/xitong',
      text: '系统管理',
      icon: <SecurityScanOutlined />,
      children: [
        {
          path: '/list',
          text: '登录日志'
        },
      ]
    },
    {
      path: '/monitor',
      text: '监控',
      icon: <SecurityScanOutlined />,
      children: [
        {
          path: '/list',
          text: '监控信息'
        },
      ]
    },
  ])
  //侧边收缩
  const onCollapse = useCallback(() => {
    // console.log("collapsed", collapsed);
    setCollapsed(!collapsed)
  }, [collapsed])


  //改变主题颜色
  const onTheme = useCallback(() => {
    setTheme(theme == "dark" ? "light" : "dark")
    localStorage.setItem("theme", theme == "dark" ? "light" : "dark")
  }, [theme])

  const changeMenu = useCallback((e) => {
    props.history.push(e.key)
  }, [props.location.pathname])

  const initBreadCrumb = (location = props.location) => {
    const paths = location.pathname.split(/\b(?=\/)/)
    const breadcrumbRoutes = paths.map(item => {
      return {
        path: item,
        breadcrumbName: pathName[item]
      }
    })
    setbreadcrumb(paths)
    setbreadcrumbRoutes(breadcrumbRoutes)
  }
  useEffect(() => {
    initBreadCrumb()
    // localStorage.getItem("theme")
    props.history.listen(initBreadCrumb)
  }, [])
  return (
    <Layout style={{ height: "100vh" }}>
      <Header className="header">
        <div className="left" style={{ float: "left" }}>
          <TwitterOutlined style={{ padding: 5, color: "#fff", fontSize: 35, verticalAlign: "middle" }} />
          <span style={{ padding: 5, color: "#fff", fontSize: 20, verticalAlign: "middle" }}>党员信息管理系统</span>
        </div>
        <div className="right" style={{ float: "right" }}>
          <span style={{ color: "#fff", marginRight: 18 }}>{username}</span>

          <Dropdown overlay={contentmenu} trigger={['click']}>
            <Avatar size={"large"} src={"/api" + head} />
          </Dropdown>
        </div>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background" theme={theme} collapsible collapsed={collapsed} onCollapse={onCollapse} >
          <Menu theme={theme} mode="inline" defaultSelectedKeys={['1']} onClick={changeMenu}>
            {
              menu.map(item => {
                if (item.children) {
                  return (
                    <SubMenu key={baseUrl + item.path} icon={item.icon} title={item.text}>
                      {
                        item.children.map(items => {
                          return <Menu.Item key={baseUrl + item.path + items.path}>{items.text}</Menu.Item>
                        })
                      }
                    </SubMenu>
                  )
                } else {
                  return <Menu.Item key={item.path} icon={item.icon}>{item.text}</Menu.Item>
                }
              })
            }
          </Menu>
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Breadcrumb style={{ margin: '16px 0' }} routes={breadcrumbRoutes}>
          </Breadcrumb>
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            <Switch>
              <Route path={baseUrl + "/monitor"} component={Monitor} />
              <Route path={baseUrl + "/editimg"} component={Editimg} />
              <Route path={baseUrl + "/editpass"} component={Editpass} />
              <Route path={baseUrl + "/home"} component={Home} />
              <Route path={baseUrl + "/xitong"} component={Xitong} />
              <Route path={baseUrl + "/dangyuan"} component={Dangyuan} />
              <Route path={baseUrl + "/branch"} component={Branch} />
              <Route path={baseUrl + "/user"} component={User} />
              <Route path={baseUrl + "/manage"} component={Manage} />
              <Redirect from={baseUrl} to={baseUrl + "/home"} />
            </Switch>
          </Content>
          <Footer>
            <Button onClick={onTheme} style={{ border: "#001529", borderRadius: 5, position: "absolute", left: 200, bottom: 17 }} >改变主题颜色</Button>
          </Footer>
        </Layout>
      </Layout>
    </Layout>
  )

}

Manage = withStorage("userInfo")(Manage)
export default Manage;
